import { Component, Vue, Prop } from 'vue-property-decorator';
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

@Component({
  components: {
  }
})
export default class PublicMap extends Vue {
  @Prop({
    required: false,
    default: 'dom_map',
  }) domID!: any;

  mapcore:any;  // 地图
  mainMap:any; // 主地图元素dom
  ERD: any; // 地图大小监听器elementResizeDetector

  mounted() {
    this.initMap();

    // 将回调延迟到下次 DOM 更新循环之后执行
    this.$nextTick(() => {
      // 监控元素大小变化
      const elementResizeDetectorMaker = require("element-resize-detector");
      this.ERD = elementResizeDetectorMaker();
      this.mainMap = document.querySelector('.main-map');
      this.ERD.listenTo(this.mainMap, this.updateMapSize); // 监听地图大小变化,自适应大小
    });
  }

  beforeDestroy() {
    // 完全删除检测器和所有侦听器
    this.ERD.uninstall(this.mainMap);
  }

  initMap() {
    // 地图实例
    this.mapcore = new Map({
      target: this.domID, // 对应页面里 id 为 map 的元素
      layers: [ // 图层
        new Tile({
          source: new OSM() // 图层数据源
        })
      ],
      view: new View({ // 地图视图
        projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
        center: [114.064839, 30.548857], // 武汉坐标
        minZoom: 1, // 地图缩放最小级别
        zoom: 10 // 地图缩放级别（打开页面时默认级别）
      })
    })
  }

  /**
 * 地图缩放修改
 */
  public updateMapSize() {
    if (!this.mapcore) return;
    this.mapcore.updateSize();
  }
}